<template>
    <ScrollView :useLoadMore="false" :useRefresh="false">
        <ul>
            <li class="item" v-for="item in itemList" @click="goDetail(item.id)">
                <p class="title">
                    <span class="text">
                        {{item.title}}
                    </span>
                </p>
                <div class="desc">
                    <Avatar :url="item.author.avatar_url" :size="24" class="avatar"/>
                    <div class="content">
                        <div>
                            {{item.author.loginname}}{{submitTime(item.last_reply_at)}}
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </ScrollView>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        Component,
        Prop
    } from 'vue-property-decorator';
    import * as utils from '../../../common/utils';

    import {
        Author
    } from './../../../state/interface/topics';

    interface ItemData {
        author: Author,
        id: string,
        last_reply_at: Date,
        title: string
    }

    import {
        Avatar
    } from './../../../components';

    @Component({
        components: {
            Avatar
        }
    })
    export default class Item extends Vue {
        @Prop({default: () => []}) itemList!: Array<ItemData>

        submitTime(update_at:Date): string {
            return ` • 更新于${utils.getTimeFromNow(update_at)}`
        }

        private goDetail(id: string) {
            this.$router.push(`/details/${id}`)
        }
    }
</script>

<style scoped lang="scss">
    @import "../../../common/var";

    .item {
        padding: 16px 16px;
        background-color: #fff;
        border-bottom: 1px solid #ececec;
        transition: background .3s $bezier;
        &:active {
            background: #f2f2f2;
        }
    }

    .avatar {
        margin-right: 6px;
    }

    .title {
        color: #353535;
        font-size: 15px;
        line-height: 21px;
        margin-bottom: 16px;
        font-weight: 500;
    }

    .desc {
        display: flex;
        align-items: center;
    }

    .content {
        flex: 1;
        display: flex;
        font-size: 13px;
        color: #888;
        justify-content: space-between;
    }

    .text {
        margin-left: 4px;
    }
</style>